import Taro from '@tarojs/taro';
import {Image, View, RichText} from '@tarojs/components';
import {connect} from "@tarojs/redux";
import {request, unite} from '../../../utils/index';
import Head from "../../../asset/images/head.png";
import Address from "../../../asset/images/address_icon.png";
import LeftIcon from "../../../asset/images/left_icon.png";
import RightIcon from "../../../asset/images/right_icon.png";
import Success from "../../../asset/images/success.png";
import './orderDetail.scss';
import Close from "../../../asset/images/close.png";

class OrderDetail extends Taro.Component {
    config = {
        navigationBarTitleText: '预约详情',
        backgroundColor: '#fff',
    };

    state = {
        orderData: [],
        mealStatus: false, //取消预约弹窗
        tkStatus: false, //退款成功为true
        signStatus: false, //签到弹窗
        HyStatus: false,//加好友
    };

    componentDidMount() {
        this.init(); //获取订单详情
    }

    //获取订单详情
    init = () => {
        const params = {
            url: '/wx/order/detail',
            data:{
                orderId: this.$router.params.id,
            }
        };
        request(params).then(res => {
            if (res) {
                if(res.code == 200) {
                    if (res && res.data) {
                        this.setState({
                            orderData: res.data,
                        })
                    }
                }
            }
        })
    };

    //教练收藏 取消收藏
    collect = () => {
        const {orderData} = this.state;
        if (orderData.collectionStatus == 0) {
            const params = {
                url: '/wx/collection/save',
                data:{
                    collectionTypeCode: '02', //收藏类型编码 （01 课程收藏、02 教练收藏、03 教室好收藏）
                    relateKeyId: orderData.coachInfo.coachId,
                }
            };
            request(params).then(res => {
                if (res) {
                    if(res.code == 200) {
                        unite.showToast('收藏成功');
                        this.init() //获取订单详情
                    }
                }
            })
        } else {
            const params = {
                url: '/wx/collection/deleteById',
                data:{
                    collectionTypeCode: '02', //收藏类型编码 （01 课程收藏、02 教练收藏、03 教室好收藏）
                    relateKeyId: orderData.coachInfo.coachId,
                }
            };
            request(params).then(res => {
                if (res) {
                    if(res.code == 200) {
                        unite.showToast('已取消收藏');
                        this.init() //获取订单详情
                    }
                }
            })
        }
    };

    //跳转课程详情
    skipCourseDetail = () => {
        Taro.navigateTo({
            url: '../order-detail-next/orderDetailNext?id=' + this.$router.params.id,
        })
    };

    //取消预约弹窗
    paySetMeal = () => {
        this.setState(prevState => ({
            mealStatus: !prevState.mealStatus,
        }))
    };

    //取消预约
    cancelOrder = () => {
        const {orderData} = this.state;
        const params = {
            url: '/wx/pay/refundCourse',
            data:{
                orderId: orderData.orderId,
            }
        };
        request(params).then(res => {
            if (res) {
                this.paySetMeal();
                if(res.code == 200) {
                    Taro.setNavigationBarTitle({
                        title: '取消成功'
                    });
                    this.setState({
                        tkStatus: true,
                    })
                } else {
                    unite.showToast(res.msg)
                }
            }
        })
    };

    //复制微信号
    copyWx = () => {
        const {orderData} = this.state;
        Taro.setClipboardData({
            //准备复制的数据
            data: orderData.weixin,
            success: function () {
                unite.showToast('复制成功');
            }
        });
    };

    //签到
    signInSt = () => {
        const {orderData} = this.state;
        const params = {
            url: '/wx/firstPage/signDispatch',
            data:{
                orderId: orderData.orderId, //订单id
                type: 1,
            }
        };
        request(params).then(ret => {
            if (ret) {
                if(ret.code == 200) {
                    unite.showToast('签到成功');
                    //    刷新列表
                    setTimeout(() => {
                        Taro.navigateBack({delta: 1})
                    }, 1500)
                }
            }
        });
    };

    //签到弹窗
    signStatusr = () => {
        this.setState(prevState => ({
            signStatus: !prevState.signStatus,
        }))
    };

    //加好友弹窗
    HyStatusr = () => {
        this.setState(prevState => ({
            HyStatus: !prevState.HyStatus,
        }))
    };

    //跳转教室地图导航
    goToMap = () => {
        const {orderData} = this.state;
        if (orderData.latitude) {
            Taro.openLocation({
                latitude: Number(orderData.latitude),
                longitude: Number(orderData.longitude),
                address: orderData.address
            })
        } else {
            unite.showToast('暂无位置');
        }
    };

    render() {
        const {orderData, mealStatus, tkStatus, signStatus, HyStatus} = this.state;
        return (
            <View className="page">
                {!tkStatus ? (
                    <View>
                        <View className="order-head-top">
                            <View className="goods-head-content flex-lr" onClick={this.skipCourseDetail}>
                                <View className="flex-top-l">
                                    <Image className="imgs" src={orderData.classAvatar} mode="aspectFit"/>
                                    <View className="names">
                                        <View className="text-overflow text">{orderData.className}</View>
                                        <View>{orderData.classDate +' '+orderData.classWeekDay +' '+ orderData.classBeginTime + '~' + orderData.classEndTime}</View>
                                        <View className="flex-l title">
                                            {orderData.className && (
                                                <View className="bq-text flex-center">{orderData.className}</View>
                                            )}
                                            {orderData.classTypeName && (
                                                <View className="bq-text flex-center">{orderData.classTypeName}</View>
                                            )}
                                        </View>
                                    </View>
                                </View>
                                <View className="arrow"></View>
                            </View>
                            <View className="goods-address flex-lr" onClick={this.goToMap}>
                                <View className="flex-l">
                                    <Image src={Address} mode="aspectFit" className="address-img"/>
                                    <View className="titles">
                                        <View className="texts text-overflow">{orderData.roomName}</View>
                                        <View className="text-overflow">{orderData.address}</View>
                                    </View>
                                </View>
                                <View className="arrow"></View>
                            </View>
                        </View>
                        {orderData.coachInfo &&(
                            <View className="head-goods-wrap flex-lr">
                                <View className="flex-l">
                                    <Image className="head-img" src={orderData.coachInfo.avatar}/>
                                    <View className="head-title">
                                        <View className="name">{orderData.coachInfo.coachName}</View>
                                        <View>收藏量：{orderData.coachInfo.collectionCnt}+</View>
                                    </View>
                                </View>
                                <View className="flex-r">
                                    <View className="btns flex-center" onClick={this.HyStatusr}>
                                        {/*<Image className="icon-img" src={Head} mode="aspectFit"/>*/}
                                        <View>+ 加好友</View>
                                    </View>
                                    <View className="btns btns-sc flex-center">
                                        <View onClick={this.collect}>{orderData.collectionStatus == 0 ? '收藏' : '已收藏'}</View>
                                    </View>
                                </View>
                            </View>
                        )}
                        <View className="head-list-wraps">
                            <View className="head-list flex-lr">
                                <View>班级</View>
                                <View className="list">{orderData.reservedInfo}</View>
                            </View>
                            <View className="head-list flex-lr">
                                <View>订单号</View>
                                <View className="list">{orderData.outTradeNo}</View>
                            </View>
                            <View className="head-list flex-lr">
                                <View>总价</View>
                                <View className="list">{orderData.chargeTotal}</View>
                            </View>
                            <View className="head-list flex-lr">
                                <View>实付</View>
                                <View className="list">{orderData.factAcceptCharge}</View>
                            </View>
                        </View>
                        <View className="head-bottom-wrap">
                            <View className="bt-name">注意事项</View>
                            <RichText className="bt-title" nodes={orderData.remark}></RichText>
                            <View className="bt-tishi">（{orderData.classDate +' '+ orderData.classEndTime} 后取消，不支持退款）</View>
                            <View className="bt-btns-wrap flex-lr">
                                <View className="qx-btns flex-center" onClick={this.paySetMeal}>取消预约</View>
                                {orderData.enableSign == 'N' ? (
                                    <View className="qr-btns qr-btns-hui flex-center">签到</View>
                                ) : (
                                    <View className="qr-btns flex-center" onClick={this.signInSt}>签到</View>
                                )}
                            </View>
                        </View>
                    </View>
                ) : (
                    <View className="tk-wrap-content">
                        <Image className="img-success" src={Success} mode="aspectFit"/>
                        <View className="txt-success">退款成功</View>
                        <View className="flex-lr">
                            <View className="brns flex-center" onClick={() => {Taro.navigateBack({delta: 1})}}>返回</View>
                            <View className="brns brns-next flex-center" onClick={() => { Taro.switchTab({url: `/pages/index/index`})}}>继续逛逛</View>
                        </View>
                    </View>
                )}

                {/*    取消预约*/}
                {mealStatus && (
                    <View className="model-type flex-bottom">
                        <View className="set-meal-content">
                            <View className="meal-names">
                                <View>自助退款</View>
                                <Image className="img-close" src={Close} onClick={this.paySetMeal} mode="aspectFit"/>
                            </View>
                            <View className="meal-list-wrap">
                                <View className="meal-list flex-lr">
                                    <View>有效期</View>
                                    <View className="name">{orderData.classDate + orderData.classEndTime}</View>
                                </View>
                                <View className="meal-list flex-lr">
                                    <View>预约内退</View>
                                    <View className="name">{orderData.className}</View>
                                </View>
                                <View className="meal-list meal-list-none flex-lr">
                                    <View>退款金额</View>
                                    <View className="name">{orderData.factAcceptCharge}元</View>
                                </View>
                                <View className="meal-list meal-list-none flex-lr">
                                    <View>退款方式</View>
                                    <View className="name">余额（5个工作日内）</View>
                                </View>
                            </View>
                            <View className="max-btn flex-center" onClick={this.cancelOrder}>确认取消</View>
                        </View>
                    </View>
                )}

                {/*签到弹窗*/}
                {signStatus &&(
                    <View className="model-type flex-center">
                        <View className="sign-content-wrap">
                            <View className="content-title">
                                <Image className="img-suc" src={Success} mode="aspectFit"/>
                                <View>签到成功</View>
                            </View>
                            <View className="return-btn" onClick={this.signStatusr}>返回</View>
                        </View>
                    </View>
                )}

                {/*加好友弹窗*/}
                {HyStatus &&(
                    <View className="model-type flex-center">
                        <View className="sign-content-wrap">
                            <View className="content-title flex-center">
                                <View>公众号回复1，获取教练微信</View>
                            </View>
                            <View className="return-btn" onClick={this.HyStatusr}>返回</View>
                        </View>
                    </View>
                )}



                {/*之前页面*/}
                {/*<View className="order-wrap">*/}
                {/*    <View className="order-top" onClick={this.skipCourseDetail} style={'height:' + (Taro.getSystemInfoSync()['statusBarHeight']+43) + 'px;'}>*/}
                {/*        <View className="order-top-left">*/}
                {/*            <View className="order-name">{orderData.className}</View>*/}
                {/*            <View className="order-time flex-l">*/}
                {/*                <View>{orderData.reservedInfo}</View>*/}
                {/*                <View className="time-skrs"></View>*/}
                {/*                <View>{orderData.classDate +' '+ orderData.classWeekDay +' '+ orderData.classBeginTime +'-'+ orderData.classEndTime}</View>*/}
                {/*            </View>*/}
                {/*        </View>*/}
                {/*        <View className="order-top-right">*/}
                {/*            <View className="arrow"></View>*/}
                {/*        </View>*/}
                {/*    </View>*/}
                {/*    <View className="order-top-detail">*/}
                {/*        <View className="detail-item">*/}
                {/*            <Image src={Address} className="item-img"/>*/}
                {/*            <View className="item-text">*/}
                {/*                <View className="item-name">环球港全能店教室</View>*/}
                {/*                <View className="item-title">{orderData.address}</View>*/}
                {/*            </View>*/}
                {/*        </View>*/}
                {/*        <View className="detail-item">*/}
                {/*            <View className="arrow"></View>*/}
                {/*        </View>*/}
                {/*    </View>*/}
                {/*</View>*/}
                {/*<View className="order-top-detail-wrap">*/}
                {/*    <View className="order-top-detail">*/}
                {/*        <View className="detail-item">*/}
                {/*            <Image src={orderData.coachInfo.avatar || Head} className="item-img"/>*/}
                {/*            <View className="item-text">*/}
                {/*                <View className="item-name">{orderData.coachInfo.coachName}</View>*/}
                {/*                <View className="item-title">收藏量：{orderData.coachInfo.collectionCnt}</View>*/}
                {/*            </View>*/}
                {/*        </View>*/}
                {/*        <View className="detail-item">*/}
                {/*            <View className="item-btn" onClick={this.copyWx}>加好友</View>*/}
                {/*            <View className="item-btn item-btn-next flex-center" onClick={this.collect}>{orderData.collectionStatus == 0 ? '收藏' : '已收藏'}</View>*/}
                {/*        </View>*/}
                {/*    </View>*/}
                {/*</View>*/}
                {/*<View className="order-bottom-wrap">*/}
                {/*    <View className="order-bottom">*/}
                {/*        <View className="bottom-top flex-center">*/}
                {/*            <Image src={LeftIcon} className="top-img"/>*/}
                {/*            <View className="top-title">注意事项</View>*/}
                {/*            <Image src={RightIcon} className="top-img"/>*/}
                {/*        </View>*/}
                {/*        <View className="bottom-bt-title">1.介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍*/}
                {/*            介绍介绍介绍介绍介绍介绍介绍介绍*/}
                {/*            2.介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍*/}
                {/*            介绍介绍介绍介绍介绍介绍介绍介绍</View>*/}
                {/*    </View>*/}
                {/*</View>*/}
                {/*<View className="bottom-btn-fix-wrap">*/}
                {/*    <View>订单号：{orderData.outTradeNo}</View>*/}
                {/*    <View className="flex-lr btn-list-money">*/}
                {/*        <View>总价：{orderData.chargeTotal + '元'}</View>*/}
                {/*        <View className="flex-r">*/}
                {/*            <View>实付：</View>*/}
                {/*            <View className="money">{'¥' + orderData.factAcceptCharge}</View>*/}
                {/*        </View>*/}
                {/*    </View>*/}
                {/*    <View className="order-bottom-btn flex-center" onClick={this.cancelOrder}>取消预约</View>*/}
                {/*    /!*<View className="bottom-tishi">（5月09日 5:40后取消，不支持退款）</View>*!/*/}
                {/*</View>*/}
            </View>
        )
    }
}

const mapStateToProps = state => {
    let {} = state;
    return {
    }
};

const mapDispatchToProps = {
};

export default connect(mapStateToProps, mapDispatchToProps)(OrderDetail);



